<template>
    <Teleport :to="to" v-if="modelValue">

        <div class="mark" @mouseup="isMove = false" @mousemove="move" @mouseleave="isMove = false">
            <div class="card" :style="Object.assign(domPosition, { 'width': width })" :class="{ screen: isScreen }">
                <div class="header" @mousedown="down">
                    {{ title }}
                    <span class="close">
                        <!-- 全屏 -->
                        <el-icon v-if="!isScreen">
                            <IEpFullScreen @click.stop="zoom" />
                        </el-icon>
                        <!-- 缩小 -->
                        <el-icon v-else>
                            <IEpCrop @click.stop="shrink" />
                        </el-icon>
                        <!-- 关闭 -->
                        <el-icon>
                            <IEpClose @click.stop="close" />
                        </el-icon>
                    </span>
                </div>
                <div class="content">
                    <slot name="main"></slot>
                </div>
                <div class="footer">
                    <slot name="footer">
                        <div class="footer-default">
                            <el-button type="default">取 消</el-button>
                            <el-button type="primary">确 认</el-button>
                        </div>
                    </slot>
                </div>
            </div>

        </div>

    </Teleport>
</template>

<script lang='ts' setup>

import { ref, toRefs } from 'vue';

interface DialogProps {
    modelValue: boolean
    to?: string, // 挂载DOM
    title?: string // 标题
    drag?: boolean // 是否允许拖动
    align?: "center" | "left" | "right" // 标题居中
    width?: string // dialog宽度
}

interface handleEmits {
    (e: "close"): void
}

const props = withDefaults(defineProps<DialogProps>(), {
    to: "body",
    title: "标题",
    drag: true,
    align: "left",
    width: "30%"
})

const { to, title, drag, align, width, modelValue } = toRefs(props)

const emits = defineEmits<handleEmits>()

const isScreen = ref<boolean>(false)
// 放大
const zoom = () => {
    isScreen.value = true
}
// 缩小
const shrink = () => {
    isScreen.value = false
}
// 关闭事件
const close = () => {
    emits("close")
}
/** 拖动功能 */
const isMove = ref<boolean>(false)
const domPosition = ref({
    left: "50%",
    top: "30%",
})
const movePosition = ref({
    x: 0,
    y: 0,
})
const down = (event: MouseEvent) => {

    if (!drag) return isMove.value = false

    isMove.value = true

    const { pageX, pageY, target } = event
    const { offsetLeft, offsetTop } = (target as HTMLDivElement).parentElement as HTMLDivElement
    /**
      * @pageX @pageY 是鼠标在页面上的坐标
      * @offsetLeft @offsetTop 是元素相对于页面左上角的偏移位置
      * @x @y 便是鼠标相对于元素左上角的偏移位置
     */
    movePosition.value = {
        x: pageX - offsetLeft,
        y: pageY - offsetTop
    }

}
const move = (event: MouseEvent) => {
    if (!isMove.value) return
    const { pageX, pageY } = event
    const { x, y } = movePosition.value
    domPosition.value = {
        left: `${pageX - x}px`,
        top: `${pageY - y}px`,
    }
}

</script>

<style lang="less" scoped>
.mark {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
    background-color: rgba(0, 0, 0, 0.4);

    .card {
        margin: auto;
        min-width: 400px;
        position: absolute;
        background-color: #fff;
        transform: translate(-50%, -50%);
        transition: width .3s;
    }
}

.el-icon+.el-icon {
    margin-left: 8px;
}

.header {
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    width: 100%;
    color: #000;
    border-bottom: 1px solid #e5e5e5;
    user-select: none;
    text-align: v-bind(align);
    padding: 0px 20px;

    .close {
        position: absolute;
        right: 15px;
        line-height: 50px;
        cursor: pointer;

        svg {
            &:hover {
                color: var(--active-color);
            }
        }

    }
}

.content {
    min-height: 50px;
}

.footer {
    min-height: 40px;

    .footer-default {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.screen {
    width: 100% !important;
}
</style>